<template>
  <img
    src="../images/Snipaste_2023-05-04_17-23-09.png"
    alt=""
    class="image1"
    @click="addImage"
  />
  <img
    src="../images/Snipaste_2023-05-04_17-23-33.png"
    alt=""
    class="image2"
    @click="removeImage"
  />
</template>
<script setup>
import { inject, onMounted, ref } from 'vue'
let $map
let isToggle = ref(false)

onMounted(() => {
  $map = inject('$map')
})

function addImage() {
  var layer = $map.getLayers().getArray()
  var gaode = layer[1]
  gaode.setVisible(true)
  isToggle.value = false
}
function removeImage() {
  var layer = $map.getLayers().getArray()
  var gaode = layer[1]
  gaode.setVisible(false)
  isToggle.value = true
}
</script>
<style scoped>
.image1 {
  position: fixed;
  right: 400px;
  bottom: 50px;
  z-index: 1000;
}
.image2 {
  position: fixed;
  right: 170px;
  bottom: 50px;
  z-index: 1000;
}
</style>
